<template>
    <div style="padding-left: 17px;">
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>
                    <i class="el-icon-office-building"></i> 机构管理
                </el-breadcrumb-item>
                <el-breadcrumb-item>密钥管理</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <el-form ref="form" :model="form" label-width="80px">
                <el-form-item label="密钥生成">
                    <el-input v-model="form.name" style="width:300px" :disabled="true"></el-input>
                    <el-button type="success" style="margin-left: 30px" @click="generate">生成密钥</el-button>
                    <el-button type="primary" @click="addDomain" style="margin-left: 30px">生成代码</el-button>
                </el-form-item>
                <el-form-item
                    v-for="(domain) in dynamicValidateForm.domains"
                    :label="'生成代码'"
                    :key="domain.key"
                    :prop="value"
                >
                    <el-input
                        type="textarea"
                        style="width:600px; "
                        :rows="4"
                        v-model="form.value"
                        readonly
                    ></el-input>
                    <el-button style="margin-left: 30px" @click="copyShaneUrl(form.value)">复制代码</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script>
import Qs from 'qs';
import { log } from 'util';
export default {
    data() {
        return {
            editVisible: false,
            form: {
                name: '',
                value: ''
            },
            dynamicValidateForm: {
                domains: []
            },
            value2: ''
        };
    },
    created() {
        //获取密钥
        this.$http
            .post(
                '/api/api/user/ekey',
                Qs.stringify({
                    name: $cookies.get('tokenuser'), //用户账号
                    form: $cookies.get('tokenform'), //用户身份（0公司 1机构 2客服）
                    token: $cookies.get('tokenpa').token, //当前登录令牌
                    type: 'get' //执行操作(up更新密钥 get获取密钥)
                }),
                { headers: { 'Content-Type': 'application/x-www-form-urlencoded' } }
            )
            .then(obtain => {
                if (obtain.body.code == 200) {
                    this.form.name = obtain.body.data.key;
                } else {
                    this.$message.error(obtain.body.msg);
                }
            })
            .catch(fail => {
                this.$message.error({
                    message: '服务器请求失败...'
                });
            });
    },
    methods: {
        //生成密钥
        generate() {
            this.$http
                .post(
                    '/api/api/user/ekey',
                    Qs.stringify({
                        name: $cookies.get('tokenuser'), //用户账号
                        form: $cookies.get('tokenform'), //用户身份（0公司 1机构 2客服）
                        token: $cookies.get('tokenpa').token, //当前登录令牌
                        type: 'up' //执行操作(up更新密钥 get获取密钥)
                    }),
                    { headers: { 'Content-Type': 'application/x-www-form-urlencoded' } }
                )
                .then(obtain => {
                    if (obtain.body.code == 200) {
                        this.form.name = obtain.body.data.key;
                        this.$message.success(obtain.body.msg);
                    } else {
                        this.$message.error(obtain.body.msg);
                    }
                })
                .catch(fail => {
                    this.$message.error({
                        message: '服务器请求失败...'
                    });
                });
        },
        //复制代码
        copyShaneUrl(shareLink) {
            var input = document.createElement('input'); // 直接构建input
            input.value = shareLink; // 设置内容
            document.body.appendChild(input); // 添加临时实例
            input.select(); // 选择实例内容
            document.execCommand('Copy'); // 执行复制
            document.body.removeChild(input); // 删除临时实例
            this.$message.success('复制成功！');
            //console.log(input.value);
        },
        //代码拼接
        codejs(key) {
            var _chatprotocol = 'https:' == document.location.protocol ? 'https://' : 'http://';
            var _chathost = document.location.hostname;
            console.log(document.location);

            // console.log(_chathost);
            var chatUrl = _chatprotocol + _chathost + ':9527' + '/chat/index.js';
            var obj1 = ' <script type="text/javascript">';
            var obj2 = 'document.write(unescape("%3Cscript src=' + "'" + chatUrl;
            var obj3 = "'" + ' type=' + "'text/javascript'" + '%3E%3C/script%3E' + '"))' + '</' + 'script>';
            var obj4 = 'var _chathost = "' + _chatprotocol + _chathost + ':9527";';
            var obj5 = 'var _chatkey = "' + key + '";';

            var codej = obj1 + obj4 + obj5 + obj2 + obj3;
            this.form.value = codej;
        },
        //生成代码
        addDomain() {
            this.dynamicValidateForm.domains = {
                key: Date.now()
            };
            this.value = this.form.name;
            this.codejs(this.value);
        }
    }
};
</script>

<style>
.message-title {
    cursor: pointer;
}
.handle-row {
    margin-top: 30px;
}
</style>

